<template>
  <div class="planet-chart">
    <div class="progress-content">
      <template v-if="inPage=='preview' || inPage=='dataBoard'">
      <div class="progress-list" v-for="item in tableList">
        <div class="progress-list-title">
          <span>{{ (item.name || item.sku) || 'Attribute Name'}}</span>
          <span>{{item.percentage}}%</span>
        </div>
        <el-progress :percentage="item.percentage" :show-text="false" :stroke-width="10"></el-progress>
      </div>
      </template>
      <template v-else>
        <div class="progress-list" v-for="item in 3">
          <div class="progress-list-title">
            <span>{{item ==1?'Temperature':(item==2?'humidity':'wind power')}}</span>
            <span>50%</span>
          </div>
          <el-progress :percentage="50" :show-text="false" :stroke-width="10"></el-progress>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import {paneldetailData} from "@/api/system/board"

export default {
  props:['keyData', 'inPage', 'componentsId'],
  name: "board10",
  data(){
    return{
      tableList: []
    }
  },
  watch:{
    keyData(){
      if(this.inPage==='preview'){
        this.getNewList()
      }
    }
  },
  mounted(){
    if(this.inPage==='dataBoard'){
      this.getData()
    }else if(this.inPage==='preview'){
      this.getNewList()
    }
  },
  methods:{
    getNewList(){
      for(let item of this.keyData){
        item.percentage = 20
      }
      this.tableList = this.keyData
    },
    getData() {
      paneldetailData({id: this.componentsId}).then(res => {
        let {data} = res
        let list_ = JSON.parse(JSON.stringify(this.keyData))
        this.tableList = []
        for (let index in list_) {
          let item = list_[index]
          item.data = data[index].data || 0
          if(item.detail){
            let detail = JSON.parse(data[index].detail)
            item.percentage = parseInt((item.data/detail.max)*100)
          }
          this.tableList.push(item)
        }
      })
    },
  }
}
</script>

<style scoped>
.progress-content{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  justify-content: space-around;
}
.progress-list {
  width: 100%;
  color: #303133;
  font-size: 14px;
}

.progress-list-title {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.progress-list-title span {
  flex: 1;
}
.progress-list-title span:last-child {
  text-align: right;
}
</style>
